<template>
  <div id="app">
    <!-- <div class="top-img">
      <van-image width="300"  height="30" :src="info.topimg" />
    </div><!-- crossOrigin="anonymous" 
    <van-search @click="$router.push('/keyword')"  shape="round"  background="#ffb1b1" placeholder="请填写您的搜索信息"  /> -->

    <div ref="box" class="banners" style="padding-bottom: 15px;background-color: #000000">
      <!-- <img :src="info.photo" crossorigin="anonymous" alt="" style="width: 90%;margin: 5%;"> -->
      <!-- <img :src="info.photo" crossorigin="anonymous" alt="" style="width: 90%;margin: 5%;"> -->
      <img class="topImg" :src="info.photo" crossorigin="anonymous" alt="" style="width: 90%;margin: 5%;">
      <div class="heads clearfix" style="position: absolute;top:30px ;z-index: 1;left: 30px;">
        <!-- <div class="fl">

					<img :src="info.logo" alt="" crossorigin="anonymous" style="height: 30px;width: 30px;">
				</div>
				<div class="fl" style="margin-top:3px ;margin-left:10px ;">
					<img :src="info.topimg" alt="" crossorigin="anonymous" style="height: 24px;">
				</div> -->
      </div>
      <!-- <div class="boss" style="margin: 0 5%;padding: 4% 4%;background-color: #ffffff;border-radius: 12px;display: flex;flex-direction: row;justify-content: space-between;">
        <div id="qrcode"></div>
        <div class="wenzi" style="width: 80%;">
          <div style="text-align: right;" class="clearfix">

            <div style="margin-left: 10px;font-weight: bold;font-size: 18px;float: right;    line-height:30px;">
              {{info.name}}
            </div>
            <img :src="info.avatar" alt="" crossorigin="anonymous" style="width: 40px;height: 40px;border-radius: 50%;float: right;">
          </div>
          <div style="font-weight: bold;text-align: right;margin-top: 16px;">{{info.title}}</div>
        </div>
      </div> -->
      <div class="flexBox">
        <div class="left">
          <div class="name"> {{info.name}}</div>
          <img class="dasai" src="/static/img/dasai.png" alt="">
          <img class="td" src="/static/img/td.png" alt="">
          <div class="qiu">
            <img class="userHead" :src="info.avatar" alt="">
          </div>
        </div>
        <div class="right">
          <div id="qrcode"></div>
        </div>
      </div>
    </div>
    <!-- <div style="color: #ffffff;text-align: center;margin-top: 20px;" @click="draw()">点击生成海报</div> -->

    <!-- <div class="cavas" ref="addAlert">
			
		</div> -->
    <div class="sharesss">
      <van-overlay :show="show" @click="show = false">
        <div style="position: fixed;width: 80%;left: 10%;top: 5%;" @click.stop>
          <img :src="imgUrl" alt="" style="border:none;" crossorigin="anonymous">
          <div v-show="!weixin" @click="downImg()" style="color: #ffffff;text-align: center;padding-top: 20px;line-height: 36px;">下载图片</div>
          <div v-show="weixin" style="color: #ffffff;text-align: center;padding-top: 20px;line-height: 36px;">
            长按图片保存</div>
        </div>
      </van-overlay>
    </div>

    <div class="h-50"></div>
    <!--加载中的动画-->
    <div id="Loading" v-show="loadings">
      <div class="loader-inner ball-beat">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>

  </div>

</template>
<style>
@notice-bar-text-color: #000000;

.sharesss .van-overlay {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

.clearfix {
  *zoom: 1;
}

/*兼容IE清除浮动*/
.clearfix:after {
  content: "\200B";
  height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}

/*清除浮动*/
#pad-w .van-list {
}
</style>
<style scoped>
.topImg {
  border-radius: 8px;
}
.flexBox {
  display: flex;
  align-items: center;
  margin: 0 5%;
  padding: 4% 4%;
  background-color: #3B393B;
  border-radius: 12px;
}
.flexBox .left,.right{
  position: relative;
  flex: 1;
  text-align: center;
  /* display: flex;
  flex-direction: column;
  justify-content: center; */
}
.left img{
  flex-shrink: 0;
}
.left .dasai{
  margin: 0 auto -20px;
}
.left .td{
  margin: 0 auto ;
}
.flexBox .name{
  margin-top: 20px;
  color: #fff;
  font-size: 18px;
}
.left .qiu{
  box-sizing: border-box;
  position: absolute;
  top: -55%;
  left: calc(50% - 10vw
  );
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: #3B393B;
  padding: 5px;
}
.qiu .userHead{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
#app{
  background-color: #000 !important;
}
</style>
<script>
import Vue from 'vue';
import QRCode from 'qrcodejs2'
import {
  Overlay
} from 'vant';

Vue.use(Overlay);
import {
  Toast
} from 'vant';
import wx from 'weixin-js-sdk';
Vue.use(Toast);
import html2canvas from 'html2canvas';
export default {
  data() {
    return {
      info: [],
      value: '',
      description: '',
      imgUrl: '',
      QRImgUrl: '',
      QRlink: 'www.xxx.com',
      loadings: true,
      show: false,
      weixin: true,
    }
  },
  components: {},
  created: function () {

    this.$emit('footer', false);

  },


  mounted() {
    this.id = this.$route.query.id;
    this.recordapi();
    this.is_weixn();
  },
  activated() {
    if (this.$route.meta.keepAlive) {
      this.$emit('footer', false);
    }
  },
  metaInfo() {
    const title = '个人分享'
    return {
      title,
      meta: [{
        description: this.info.description
      },
      {
        keywords: this.info.keyword
      },
      ]
    }
  },
  methods: {
    // downloadByBlob(url,name) {
    //     let image = new Image()
    //     image.setAttribute('crossOrigin', 'anonymous')
    //     image.src = url
    //     image.onload = () => {
    //       let canvas = document.createElement('canvas')
    //       canvas.width = image.width
    //       canvas.height = image.height
    //       let ctx = canvas.getContext('2d')
    //       ctx.drawImage(image, 0, 0, image.width, image.height)
    //       canvas.toBlob((blob) => {
    //         let url = URL.createObjectURL(blob)
    //         download(url,name)
    //         // 用完释放URL对象
    //         URL.revokeObjectURL(url)
    //       })
    //     }
    //   },
    base64ToBlob(baseUrl) {
      let arr = baseUrl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], {
        type: mime
      })


    },

    draw() {
      var that = this;
      that.loadings = true
      html2canvas(that.$refs.box, {
        useCORS: true,
        scale: window.devicePixelRatio * 2,
        allowTaint: true, // 允许跨域图片
      }).then(function (canvas) {
        that.loadings = false
        //console.log(canvas.toDataURL())
        //that.$refs.addAlert.appendChild(canvas);
        that.imgUrl = canvas.toDataURL("image/png") //将canvas转为base64图片
        that.show = true
      });
    },
    is_weixn() {
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        this.weixin = true


      } else {
        this.weixin = false
      }
    },
    // downImg() { // 下载图片
    // 	let blob = this.base64ToBlob(this.imgUrl); 

    // 	let a = document.createElement('a')
    // 	a.setAttribute('download', 'poster.png')
    // 	a.href = URL.createObjectURL(blob);
    // 	a.click()
    // },
    downImg() {
      let aLink = document.createElement('a');
      let blob = this.base64ToBlob(this.imgUrl); //new Blob([content]);

      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = 'poster.png';
      aLink.href = URL.createObjectURL(blob);
      aLink.dispatchEvent(new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
      })); //兼容火狐
    },
    qrcode(text) {
      let qrcode = new QRCode('qrcode', {
        width: 200,
        height: 200, // 高度  
        text: text, // 二维码内容  
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
        // background: '#f0f'  
        // foreground: '#ff0'  
      })
      console.log(qrcode)
    },


    recordapi() {
      var that = this;

      // var userid = that.$cookieStore.getCookie('userid');
      // if (!userid) {
      // 	this.$router.push('Logins')
      // 	return false;
      // }
      that.$api.post("/Index/share", {
        userid: this.id
      }).then(res => {
        this.loadings = false;
        that.info = res.info;
        this.qrcode(window.location.origin + "/Usercont?id=" + this.id);





        // that.QRlink=window.location.host+'#/Usercont?id='+res.info.idss
        //console.log(window.location.origin)
        // setTimeout(() => {
        //        this.draw()

        //          }, 3000)

      });
    },


  }
}
</script>
